<template>
  <a-modal :title="title" :width="800" :visible="visible" :confirmLoading="confirmLoading" switchFullscreen
    @ok="handleOk" @cancel="handleCancel" cancelText="关闭">

    <a-spin :spinning="confirmLoading">
      <a-table ref="table" size="middle" bordered rowKey="id" :columns="columns" :dataSource="dataSourceList"
        :pagination="ipagination" :loading="loading" class="j-table-force-nowrap"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" @change="handleTableChange">

        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>

          <a-divider type="vertical" />
          <a-dropdown>
            <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>

      </a-table>
    </a-spin>

    <!-- 表单区域 -->
    <ysyOilRawMaterialPrice-modal ref="modalForm" @ok="modalFormOk"></ysyOilRawMaterialPrice-modal>
  </a-modal>
</template>

<script>
  import {
    httpAction,
    getAction,
    postAction,
    deleteAction
  } from '@/api/manage'
  import pick from 'lodash.pick'
  import moment from "moment"

  import YsyOilRawMaterialPriceModal from './modules/YsyOilRawMaterialPriceModal'
  import {
    JeecgListMixin
  } from '@/mixins/JeecgListMixin'

  export default {
    name: "YsyOilRawMaterialPriceList",
    mixins: [JeecgListMixin],
    components: {
      YsyOilRawMaterialPriceModal
    },
    data() {
      return {
        title: "历史记录",
        visible: false,
        model: {},
        labelCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 5
          },
        },
        wrapperCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 16
          },
        },

        confirmLoading: false,
        form: this.$form.createForm(this),
        validatorRules: {
          oilRawMaterialPriceId: {
            rules: [{
              required: true,
              message: '请输入油原料价格id!'
            }]
          },
        },
        url: {
          list: "/app/ysyOilRawMaterialPrice/list",
          delete: "/app/ysyOilRawMaterialPrice/delete",
          add: "/app/ysyOilRawMaterialPrice/add",
          edit: "/app/ysyOilRawMaterialPrice/edit",
          bathAdd: "/app/ysyOilRawMaterialPrice/bathAdd"
        },
        refineryId: '',
        list: [],
        // 表头
        columns: [{
            title: '序号',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: "center",
            customRender: function(t, r, index) {
              return parseInt(index) + 1;
            }
          },
          {
            title: '油原料',
            align: "center",
            dataIndex: 'oilRawMaterialName'
          },
          {
            title: '挂牌价',
            align: "center",
            dataIndex: 'listPrice'
          },
          {
            title: '优惠价',
            align: "center",
            dataIndex: 'preferentialPrice'
          },
          {
            title: '时间',
            align: "center",
            dataIndex: 'createTime'
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: "center",
            scopedSlots: {
              customRender: 'action'
            },
          }
        ],
        dataSourceList: []
      }
    },
    created() {},
    methods: {
      modalFormOk() {
        this.getLoadDataList()
      },
      add(item) {
        this.refineryId = item
        this.getLoadDataList()
        this.edit({});
      },
      edit(record) {
        this.form.resetFields();
        this.model = Object.assign({}, record);
        if (record.refineryId) {
          this.refineryId = record.refineryId
        }
        this.visible = true;
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model, 'oilRawMaterialPriceId', 'oilRawMaterialId', 'refineryId',
            'listPrice', 'preferentialPrice'))
          //时间格式化
        });

      },
      close() {
        this.$emit('close');
        this.visible = false;
      },
      handleOk() {
        const that = this;
        postAction(this.url.bathAdd, this.list).then((res) => {
          if (res.success) {
            that.$message.success('操作成功');
          } else {
            that.$message.error('操作失败');
          }
          this.close()
        }).finally(() => {})
      },
      handleCancel() {
        this.close()
      },
      getLoadDataList() {
        let params = {
          pageNo: this.ipagination.current,
          pageSize: this.ipagination.pageSize,
          refineryId: this.refineryId
        }
        getAction(this.url.list, params).then((res) => {
          this.dataSourceList = res.result.records
        }).finally(() => {})
      },
      handleDelete(id) {
        deleteAction(this.url.delete + '?id=' + id).then((res) => {
          if (res.success) {
            this.$message.success(res.message)
            this.getLoadDataList()
          } else {
            this.$message.error(res.message)
          }
        })
      }

    }
  }
</script>

<style lang="less" scoped>

</style>